<!--TODO 给增加添加1个v-if的事件-->
<template>
  <div class="home-container">
    <div class="home-content">
      <div>
        <Button @click="(drawerSrmAdd = true), srmAddShowPopMenu"
          >脚本添加</Button
        >
        <Button @click="srmList">脚本查询</Button>
        <el-table :data="scriptInfoJson" style="width: 100%">
          <el-table-column fixed label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="id" width="120"> </el-table-column>
          <el-table-column prop="description" label="描述" width="120">
          </el-table-column>
          <el-table-column prop="content" label="内容" width="120">
          </el-table-column>
          <el-table-column prop="isMore" label="更多" width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isMore"
                active-color="#5B7BFA"
                inactive-color="#dadde5"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createAt" label="创建时间" width="120">
          </el-table-column>
          <el-table-column prop="modifyAt" label="修改时间" width="120">
          </el-table-column>
          <el-table-column prop="modifyReason" label="修改原因" width="150">
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="srmDelete(scope.row.id)"
                round
                class="el-icon-delete"
                >点我删除</el-button
              >
              <el-button
                @click="
                  (drawerSrmUpdate = true), srmUpdateShowPopMenu(scope.row)
                "
                round
                class="el-icon-edit"
                >点我修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="srmAddIsVisible" style="border: 1px solid blue">
        <h2>脚本录入</h2>
        <p>脚本的内容</p>
        <textarea type="text" v-model="content" />
        <p>为该脚本提供一个描述，推荐用伪代码的形式描述</p>
        <input type="text" v-model="description" />
        <p>是否需要配置环境之类的脚本。此类脚本也存在于这张表中。</p>
        <input v-model="isMore" type="checkbox" />
        <p>修改脚本原因</p>
        <input type="text" v-model="modifyReason" />
        <Button @click="srmAdd">脚本添加</Button>
      </div>
    </div>
    <!--代码抽屉-->
    <!--脚本修改-->
    <el-drawer
      title="脚本修改"
      :visible.sync="drawerSrmUpdate"
      :direction="direction"
      :before-close="srmUpdate"
      size="80%"
    >
      <el-form ref="form" v-model="form" label-width="100px">
        <el-form-item label="脚本的内容">
          <input
            type="text"
            class="form-control"
            v-model="content"
            placeholder="为该脚本提供一个描述，推荐用伪代码的形式描述"
          />
        </el-form-item>
        <el-form-item label="脚本的描述">
          <input
            class="form-control"
            type="text"
            v-model="description"
            placeholder="是否需要配置环境之类的脚本。此类脚本也存在于这张表中。"
          />
        </el-form-item>
        <el-form-item label="更多配置条件">
          <select v-model="isMore" class="form-control">
            <option value="true">true</option>
            <option value="false">false</option>
          </select>
        </el-form-item>
        <el-form-item label="修改脚本原因">
          <input
            type="text"
            class="form-control"
            v-model="modifyReason"
            placeholder="该脚本是否有更多的配置条件"
          />
        </el-form-item>
      </el-form>
    </el-drawer>
    <!--脚本增加-->
    <el-drawer
      title="脚本增加"
      :visible.sync="drawerSrmAdd"
      :direction="direction"
      size="80%"
      ref="drawerSrmUpdate"
    >
      增加
    </el-drawer>

    <!--代码抽屉 结束-->
  </div>
</template>

<script>
import { srmAdd, srmList, srmDelete, srmUpdate } from "@/api";

export default {
  name: "srm",
  data() {
    return {
      scriptInfo: "",
      code: "",
      msg: "",
      scriptInfoJson: "",
      srmAddIsVisible: false,
      srmUpdateDto: "",
      value1: true,
      value2: true,
      //抽屉
      drawerSrmUpdate: false,
      drawerSrmAdd: false,
      direction: "btt",
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    srmAddShowPopMenu() {
      this.srmAddIsVisible = true;
    },
    srmAdd() {
      srmAdd({
        content: this.content,
        description: this.description,
        isMore: this.isMore,
        modifyReason: this.modifyReason == null ? "增加" : this.modifyReason,
      }).then(() => {});
      this.srmAddIsVisible = false;
    },
    async srmUpdate(done) {
      // 0.点击，showpopMenu
      // 1.需要把update popmenu的值给set进去
      console.log(this.srmUpdateDto);
      srmUpdate({
        // 2.调用api的update方法，将修改的dto传给api
        // 创建1个对象，把值塞里面
        content: this.content,
        description: this.description,
        isMore: this.isMore,
        modifyReason: this.modifyReason == null ? "修改" : this.modifyReason,
        id: this.srmUpdateDto.id,
      }).then(() => {});
      //3.关闭抽屉
      done();
      //4.和delete一样，将页面对应数据更新
      let res = await srmList();
      this.scriptInfoJson = res.data;
      if (res.data.length === oldLen) {
        new Promise((resolve) => setTimeout(resolve, 1500));
        this.scriptInfoJson = res.data;
      }
    },
    async srmDelete(id) {
      let oldLen = this.scriptInfoJson.length;
      console.log("o: " + oldLen);
      srmDelete(id);
      let res = await srmList();
      this.scriptInfoJson = res.data;
      if (res.data.length === oldLen) {
        new Promise((resolve) => setTimeout(resolve, 1500));
        this.scriptInfoJson = res.data;
      }
    },
    srmList() {
      srmList().then((res) => {
        this.scriptInfoJson = res.data;
        this.scriptInfo = JSON.stringify(res.data, null, 4);
        this.code = JSON.stringify(res.code, null, 4);
        this.msg = JSON.stringify(res.msg, null, 4);
      });
    },
  },
};
</script>

<style scoped>
.home-container {
  padding: 10px;
  padding-top: 5px;
}
.home-content {
  padding: 10px;
  border-radius: 5px;
  background: #fff;
}
</style>
